<template>
    <view class="white-block total-block">
        <p>总资产</p>
        <p class="total-property">￥{{ totalWalletShow }}<image class="show-switch" src="/static/show-switch.png" @click="showTotal = !showTotal"/></p>
        <view class="total-block-bottom">
            <view class="clock-item">
                <p>
                    <span>正资产</span>
                    <span style="color:#00CC99">￥{{ totalWallet.assets }}</span>
                </p>
            </view>
            <view class="clock-item">
                <p>
                    <span>负资产</span>
                    <span style="color:#FF6B6B">￥{{ totalWallet.liabilities }}</span>
                </p>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref, defineProps, computed } from 'vue'
    const props = defineProps({
        totalWallet: {
            type: Object,
            default: () => ({
                assets: 0,
                liabilities: 0,
                total: 0
            })
        }
    })
    const showTotal = ref(false);
    const totalWalletShow = computed(()=>{
        if (showTotal.value) {
            return props.totalWallet.total
        } else {
            return String(props.totalWallet.total).replace(/\d/g, '*')
        }
    })
</script>

<style lang="less" scoped>
    .total-block {
        font-size: 28rpx;
        color: #999999;
        .total-property{
            font-size: 64rpx;
            color: #333333;
            display: flex;
            align-items: center;
            .show-switch{
                width: 32rpx;
                height: 32rpx;
                margin-left: 16rpx;
            }
        }
        .total-block-bottom{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding-top: 20rpx;
            .block-item{
                
            }
        }
    }
</style>